import NavBarAgain from "@/components/NavBarAgain.jsx";
import {connect} from "react-redux";
import {action} from "@/store/action/index.js";
import {Link} from "react-router-dom";
import { RightOutline} from "antd-mobile-icons";
import './Personal.scss'
import {Toast} from "antd-mobile";
const Personal = function Personal(props) {
    const {clearUserInfo, clearStoreList, navigate, info} = props;

    const signOut = () => {
        clearUserInfo();
        clearStoreList();
        localStorage.removeItem('token')
        Toast.show({
            content: '您已安全退出',
            duration: 1000,
            icon: 'success'
        })
        navigate('/login?to=/personal',{replace: true})
    }
    return <div className="personal-box">
        <NavBarAgain title="个人中心"></NavBarAgain>

        <div className="base-info">
            <Link to={'/update'}>
                <img className='pic' src={info.authorImg} alt=""/>
            </Link>


        </div>
        <div className="name">{info.nickname}</div>
        <Link to="/store" className="tab">
            我的收藏
            <RightOutline/>
        </Link>
        <div className="tab" onClick={signOut}>
            退出登录
            <RightOutline/>
        </div>

    </div>
}
export default connect(state => state.base,
    {
        clearUserInfo: action.base.clearUserInfo,
        clearStoreList: action.store.clearStoreList
    }
)(Personal)